<?php
/**
 * Created by PhpStorm.
 * User: lz
 * Date: 2017/9/13
 * Time: 22:05
 */

use app\common\service\StaticService;
use app\common\service\UrlService;

StaticService::includeAppJsStatic("", \app\assets\CustomerAsset::className());
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>订单中心</title>
    <link href="/css/m/yuyue/common.css" rel="stylesheet">
    <link href="/css/m/yuyue/orderList.css" rel="stylesheet">
    <link href="/css/m/css_style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.6.5/angular.min.js"></script>
</head>
<body ng-app="orderListApp" ng-controller="orderListCtrl">
<div>
    <!--title-->
    <div class='title'>
        <a href="/customer/user/index"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <span>我的预约</span>
    </div>

    <!---导航部分-->
    <div>
        <ul class="nav nav-tabs">
            <li class="active" class="used">
                <a href="#used" data-toggle="tab">未使用</a>
            </li>
            <li>
                <a href="#use" data-toggle="tab">已使用</a>
            </li>
        </ul>
    </div>

    <!--内容部分-->
    <div class="tab-content">
        <!---未使用订单内容-->
        <div id="used" class="tab-pane fade in active">
            <?php foreach ($notUse as $item): ?>
                <div class="option row">
                    <img ng-src="{{x.image}}" alt="" class="img-thumbnail col-xs-6">
                    <p class="col-xs-6">
                        <span><b><?=$item['name']?></b></span><br>
                        <span>预约时间：<?=date('Y-m-d', strtotime($item['time']));?></span><br>
                        <span>总价：￥<?=$item['price']?></span>
                    </p>
                </div>
            <?php endforeach; ?>
        </div>

        <!--已使用订单内容-->
        <div id="use" class="tab-pane fade">
            <?php foreach ($used as $item): ?>
                <div class="option row">
                    <img ng-src="{{x.image}}" alt="" class="img-thumbnail col-xs-6">
                    <p class="col-xs-6">
                        <span><b><?=$item['name']?></b></span><br>
                        <span>预约时间：<?=date('Y-m-d', strtotime($item['time']));?></span><br>
                        <span>总价：￥<?=$item['price']?></span>
                    </p>
                </div>
            <?php endforeach; ?>
        </div>
    </div>

</div>

<!--<script>-->
<!--    var app = angular.module('orderListApp', []);-->
<!--    app.controller('orderListCtrl', function ($scope, $http) {-->
<!--        $scope.list = [-->
<!--            [{image: "img/6.jpg", time: "2017/9/20", item: "加装夏季防虫网", price: "80"}, {-->
<!--                image: "img/1.jpg",-->
<!--                time: "2017/9/20",-->
<!--                item: "油改气",-->
<!--                price: "880"-->
<!--            }],-->
<!--            [{image: "img/1.jpg", time: "2017/9/20", item: "车身油漆修补", price: "80"}, {-->
<!--                image: "img/1.jpg",-->
<!--                time: "2017/9/20",-->
<!--                item: "音箱",-->
<!--                price: "880"-->
<!--            }],-->
<!--            [{image: "img/5.jpg", time: "2017/9/20", item: "精品洗车", price: "80"}],-->
<!--            [{image: "img/1.jpg", time: "2017/9/20", item: "四轮定位", price: "80"}],-->
<!--            [{image: "img/1.jpg", time: "2017/9/20", item: "全车打蜡", price: "80"}]-->
<!--        ];-->
<!---->
<!--        $scope.usedList = [-->
<!--            [{image: "img/1.jpg", time: "2017/8/20", item: "四轮定位", price: "80"}],-->
<!--            [{image: "img/1.jpg", time: "2017/7/20", item: "全车打蜡", price: "80"}]-->
<!--        ];-->
<!---->
<!--        $http({-->
<!--            method: 'POST',-->
<!--            url: '/customer/user/yuyue'-->
<!--        }).then(function successCallback(response) {-->
<!--            // 请求成功执行代码，返回的数据为response.data  返回的数值赋值给$scope.list和$scope.usedList-->
<!--            $data = response.data.data;-->
<!--            $scope.usedList = $data.used;-->
<!--            $scope.list = $data.notUse;-->
<!--            console.log($scope.list);-->
<!--        }, function errorCallback(response) {-->
<!--            /* 请求失败执行代码*/-->
<!--        });-->
<!--    });-->
<!--</script>-->
</body>
</html>